<template>
    <el-dialog :visible="currentVisible" :title="title" min-width="50%" :show-close="false">
        <div class="pp-info">
            <div class="tags">
                <el-tag class="tag" v-for="tag in checkedList" :key="tag.id" closable @close="handleClose(tag)">
                    {{tag.label}}
                </el-tag>
            </div>
            <el-tabs class="tabs" type="border-card">
                <el-tab-pane label="部门" class="pane">
                    <el-tree :data="treeList" default-expand-all empty-text="暂无数据"
                             @node-click="nodeClick"
                             :expand-on-click-node="false" class="tree">
                        <div class="tree-node" slot-scope="{ node, data }">
                            <div class="node-row">
                                <div class="node-row-label">
                                    <Icon type="ios-people" style="font-size: 18px;"/>
                                    {{ node.label }}
                                </div>
                                <el-radio  v-if="mode == 'SingleDept'"  v-model="checkedObject.id" :label="data.id" disabled>{{emptyString}}</el-radio>
                                <el-checkbox v-if="mode == 'MultiDept'" class="node-row-box" v-model="data.checked" disabled></el-checkbox>
                            </div>
                        </div>
                    </el-tree>
                    <div v-if="mode == 'SingleMember' || mode == 'MultiMember'" class="member">
                        <el-row v-for="item in memberList" :key="item.id" class="member-row" @click.native="nodeClick(item)">
                            <el-col :span="24">
                                <div class="node-row">
                                    <span class="node-row-label" type="text" >{{item.label}}</span>
                                    <el-radio v-if="mode == 'SingleMember'" v-model="checkedObject.id" :label="item.id" disabled>{{emptyString}}</el-radio>
                                    <el-checkbox v-if="mode == 'MultiMember'" class="node-row-box" v-model="item.checked" disabled>{{emptyString}}</el-checkbox>
                                </div>
                            </el-col>
                        </el-row>
                    </div>

                </el-tab-pane>
            </el-tabs>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="currentVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import * as R from 'ramda'
    export default {
        name: "MemberSelector",
        data() {
            return {
                title: "部门列表",
                emptyString: "",
                currentVisible: this.visible,
                checkedObject: {},
                checkedList: [],
                treeList: [],
                memberList: []
            };
        },
        props: {
            dataTree: Array,
            dataMember: Array,
            tabs: Array,
            visible: Boolean,
            mode: { type: String, default: 'SingleDept' } // SingleDept 单选部门, MultiDept 多选部门， SingleMember 单选员工， MultiMember 多选员工
        },
        methods: {
            nodeClick: function (data, node) {
                if (this.mode === 'SingleDept' || this.mode === 'SingleMember') {
                    if (this.mode === 'SingleMember' && node) {
                        this.$emit('treenodeclick', data)
                        return
                    }
                    this.checkedObject = data
                    this.checkedList.pop()
                    this.checkedList.push(data)
                }
                if (this.mode === 'MultiDept' || this.mode === 'MultiMember' ) {
                    if (this.mode === 'MultiMember' && node) {
                        this.$emit('treenodeclick', data)
                        return
                    }
                    const index = R.findIndex(R.propEq('id', data.id))(this.checkedList)
                    // console.log('index = ' + index)
                    if (index >= 0) {
                        data.checked = false
                        this.checkedList = R.remove(index, 1, this.checkedList)
                        return
                    }
                    data.checked = true
                    this.checkedList.push(data)
                }

            },
            handleClose(tag) {
                this.checkedList.splice(this.checkedList.indexOf(tag), 1);
                tag.checked = false
                this.checkedObject = {}
            },
            showDialog: function () {
                this.currentVisible = true
            },
            submit: function () {
                this.$emit('affirmative', this.checkedList)
                this.currentVisible = false
            },
            init: function () {
                this.checkedObject = {}
                this.checkedList = []
                this.treeList = R.clone(this.dataTree)
                this.memberList = R.clone(this.dataMember)
            }
        },
        watch: {
            visible: function (val) {
                this.currentVisible = val
            },
            currentVisible: function (val) {
              if (val === true) {
                  this.init()
              }
            },
            dataTree: function (val) {
                this.treeList = R.clone(val)
            },
            dataMember: function (val) {
                this.memberList = R.clone(val)
            }
        },
        created: function () {
            this.init()
            if (this.mode === 'SingleMember' || this.mode === 'MultiMember') {
                this.title = '成员列表'
            }
            console.log(this.mode)
        },

    }
</script>

<style scoped>
    .tags {
        border: #F0F0F0 1px solid;
        height: 88px;
        padding: 5px;
    }
    .tag {
        margin-top: 5px;
        margin-left: 5px;
    }
    .tabs {
        margin-top: 10px;
    }
    .tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .node-row {
        width: 100%;
        display: flex;
        flex-direction: row;

    }
    .node-row-label {
        flex: 1;
        align-self: center;
    }
    .node-row-box {
        /*align-self: flex-end;*/
    }
    .pane {
        display: flex;
        flex-direction: row;
        height: 280px;
    }
    .tree {
        flex: 1;
        overflow:scroll;
    }
    .member {
        flex: 1;
        display: flex;
        flex-direction: column;
        border-left: #F0F0F0 1px solid;
        overflow:scroll;
    }
    .member-row {
        width: 100%;
        height: 24px;
        padding-left: 10px;
    }
    .member-row:hover {
        background-color: #f5f7fa;
    }
</style>
